// This file is part of Indico.
// Copyright (C) 2002 - 2025 CERN
//
// Indico is free software; you can redistribute it and/or
// modify it under the terms of the MIT License; see the
// LICENSE file for more details.

@forward 'base/reset';

@use 'base/palette' as *;
@use 'rb:styles/sui_fixes' as *;
@use 'rb:styles/palette' as *;
@use 'rb:styles/responsive' as *;
@use 'design_system';

$indico-top-bar-height: 50px;

input {
  font-size: 100%;
}

body {
  overflow-y: scroll;
}

a {
  cursor: pointer;
}

/* SemanticUI overrides for small screens */
.ui.selection.dropdown {
  @media (max-width: $tablet-width) {
    min-width: 100%;
  }
}

// TODO: move this to Indico-wide file
.indico-top-bar {
  background-color: $dark-blue;
  height: $indico-top-bar-height;
  display: flex;
  align-items: center;
  padding: 0 20px;

  .indico-top-bar-logo {
    display: flex;
    align-items: center;

    img {
      height: 30px;
    }
  }

  .indico-user-menu {
    margin-left: auto;
  }
}

.room-edit-modal-add-btn {
  margin-bottom: 15px !important;
}

.flex-container {
  display: flex;
  align-items: center;
  margin-bottom: 5px;

  .DateRangePicker {
    padding-bottom: 0 !important;
  }
}

.delete-button {
  cursor: pointer;
  color: $red;
  opacity: 0.5 !important;
  padding-left: 15px;

  &:hover {
    opacity: 1 !important;
  }
}

.header.legend-header {
  display: flex !important;
  align-items: center;

  .icon.legend-info-icon {
    display: flex;
    align-items: center;
    color: $gray;
    margin-left: 0.5em;
    font-size: 0.9em;
  }
}

.filter-row {
  display: flex;
  align-items: baseline;
  flex-direction: row;
  margin-bottom: 10px;

  .filter-row-filters {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    > * {
      margin-right: 10px !important;
      margin-bottom: 10px !important;
    }
  }
}

.event-booking-page {
  .section.searchable-field {
    overflow: visible;
  }

  .time-column,
  .link-column {
    width: 8em;
  }

  .room-column {
    width: 6em;
  }

  .link-data span {
    text-decoration: dotted underline $gray;
  }

  tr.disabled {
    background-color: $light-gray;

    td {
      color: $dark-gray;
    }
  }

  .booking-status {
    padding-left: 0.5em;

    &.icon-disable {
      color: $pastel-red;
    }

    &.icon-time {
      color: $orange;
    }
  }
}

@mixin banner-bar {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;

  .content {
    display: flex;
    flex-grow: 1;
    align-items: center;
  }

  .content .icon {
    margin-right: 0.5em;
  }

  &.weak-hidden {
    display: none;
  }
}

.announcement-bar:not([hidden]) {
  @include banner-bar();

  &.highlight {
    background-color: $light-blue;
    color: $dark-blue;
  }

  &.warning {
    background-color: lighten($light-yellow, 5%);
    color: $dark-yellow;
  }

  &.error {
    background-color: $red;
    color: $light-red;
  }

  .close-button {
    appearance: none;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 2em;
    aspect-ratio: 1;
    padding: 0.5em;

    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
  }

  .close-button-label {
    @extend %visually-hidden;
  }

  .close-button .icon {
    margin: 0;
    width: auto;
    height: auto;
  }
}

$text-yellow: lighten($yellow, 15%);

.impersonation-bar {
  @include banner-bar();
  height: 50px;
  background-color: $dark-black;
  color: $text-yellow;
  box-shadow: 0 -5px 1px -2px rgba(#000, 0.2) inset;

  strong {
    color: lighten($yellow, 30%);
  }

  .icon {
    color: $text-yellow;
  }

  .undo-login-as {
    margin-left: auto;
    cursor: pointer;
    line-height: 1em;
  }
}

.scrolling-disabled {
  overflow-y: hidden;
}

// UI modal fixup so it does not throw off positioned controls like the date picker or tooltips
.ui.modal.visible {
  will-change: auto !important;
}
